<script>
			var module_inits = [];
			
			function load_init_modules() {
				for (var i = 0; i < module_inits.length; i++) {
					module_inits[i]();
				}
			}
			
			function call_me(fun) {
				module_inits.push(fun);
			}
			onload = load_init_modules;
		</script>

		<script>
			var slider_images_url = [
			{volist name='pics' id='vo'}
			'{$vo.url}',
			{/volist}
			];
			var e_desc = '{$title}';
		</script>
<style type="text/css">
	
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    background-color: black;
}

#container
{
    width: 500px;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
#container >div,#container > img,#titleup>img,#titledown>img
{
    position: absolute;
}
#mo1
{
    left: -222px;
    top: -128px;
    opacity: 0;
}
#mo2
{
    left: -155px;
    top: 589px;
    opacity: 0;
}
#moxian1
{
    left: 58px;
    top: 504px;
    -webkit-transform-origin: 10% 50%;
    opacity: 0;
}
#moxian2
{
    left: 61px;
    top: 171px;
    width: 390px;
    -webkit-transform-origin: 10% 50%;
    opacity: 0;
}
#hua1
{
    left: 373px;
    top: 127px;
    opacity: 0;
    -webkit-transform-origin: 50% 90%;
}
#mofen
{
    left: 33px;
    top: 396px;
    opacity: 0;
}
#heye1
{
    left: 43px;
    top: 471px;
    opacity: 0;
}
#mozi
{
    left: 72px;
    top: 398px;
    opacity: 0;
}
#shangzi
{
    left: 148px;
    top: 417px;
    opacity: 0;
}
#huazi
{
    left: 142px;
    top: 469px;
    opacity: 0;
}
#kaizi
{
    left: 205px;
    top: 468px;
    opacity: 0;
}
#heye2
{
    left: 242px;
    top: 573px;
    opacity: 0;
    width: 95px;
    height: 107px;
}
#lianhua1
{
    left: 300px;
    top: 542px;
    opacity: 0;
    width: 97px;
    height: 116px;
}
#lianhua2
{
    left: 405px;
    top: 561px;
    opacity: 0;
    width: 23px;
    height: 72px;
}
#heye3
{
    left: 341px;
    top: 629px;
    opacity: 0;
}
.div1v
{
    width: 437px;
    height: 639px;
    left: 30px;
    top: 50px;
    overflow: hidden;
    box-shadow: 5px 3px 20px #03202B;
    opacity: 0;
}
.div1h
{
    width: 437px;
    height: 309px;
    left: 30px;
    top: 192px;
    overflow: hidden;
    box-shadow: 5px 3px 20px #03202B;
    opacity: 0;
}
.div21h
{
    width: 437px;
    height: 290px;
    left: 30px;
    top: 56px;
    overflow: hidden;
    box-shadow: 5px 3px 20px #03202B;
    opacity: 0;
}
.div22h
{
    width: 437px;
    height: 290px;
    left: 30px;
    top: 383px;
    overflow: hidden;
    box-shadow: 5px 3px 20px #03202B;
    opacity: 0;
}
.div21v
{
    width: 250px;
    height: 350px;
    left: 215px;
    top: 29px;
    overflow: hidden;
    box-shadow: 5px 3px 20px #03202B;
    opacity: 0;
}
.div22v
{
    width: 250px;
    height: 350px;
    left: 28px;
    top: 342px;
    overflow: hidden;
    box-shadow: 5px 3px 20px #03202B;
    opacity: 0;
}
#div41h
{
    width: 410px;
    height: 290px;
    left: 66px;
    top: 60px;
    overflow: hidden;
    box-shadow: 5px 3px 20px #03202B;
    opacity: 0;
}
#div42h
{
    width: 410px;
    height: 290px;
    left: 13px;
    top: 380px;
    overflow: hidden;
    box-shadow: 5px 3px 20px #03202B;

    opacity: 0;
}
#div41v
{
    width: 250px;
    height: 350px;
    left: 225px;
    top: 39px;
    overflow: hidden;
    box-shadow: 5px 3px 20px #03202B;
    opacity: 0;
}
#div42v
{
    width: 250px;
    height: 350px;
    left: 28px;
    top: 342px;
    overflow: hidden;
    box-shadow: 5px 3px 20px #03202B;
    opacity: 0;
}
</style>
<style type="text/css">
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes modian_in
{
    from  {-webkit-transform: scale(0.3);opacity: 1}
    to    {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes heye3_in
{
    from  {-webkit-transform: scale(0.3);opacity: 0}
    to    {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes heye1_in
{
    from  {-webkit-transform: scale(0.2);opacity: 0}
    to    {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes heye_ani
{
    from  {-webkit-transform: rotate(0deg);}
    to    {-webkit-transform: rotate(5deg);}
}
@-webkit-keyframes mo1_in
{
    from  {-webkit-transform: translate(50px,-20px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes title_in
{
    from  {-webkit-transform: scale(1.05,1);opacity: 0}
    to    {-webkit-transform: scale(1,1);opacity: 1}
}
@-webkit-keyframes shuiwen
{
    0%  {-webkit-transform: scale(0.8);opacity: 0}
    50% {-webkit-transform: scale(1);opacity: 1}
    100%{-webkit-transform: scale(1.2);opacity: 0}
}
@-webkit-keyframes shuiwen2
{
    0%  {opacity: 0}
    30% {opacity: 1}
    70% {opacity: 1}
    100%{opacity: 0}
}
@-webkit-keyframes guangdian1
{
    0%   {opacity: 0;-webkit-transform:translate(0px,0px);}
    20%  {opacity: 1;-webkit-transform: translate(0px,0px);}
    100% {opacity: 1;-webkit-transform: translate(-377px,0px);}
}
@-webkit-keyframes guangdian2
{
    0%   {opacity: 0;-webkit-transform: translate(0px,0px);}
    20%  {opacity: 1;-webkit-transform: translate(0px,0px);}
    100% {opacity: 1;-webkit-transform: translate(377px,0px);}
}
@-webkit-keyframes yuwei
{
    from  {-webkit-transform: rotate(-20deg);}
    to    {-webkit-transform: rotate(20deg);}
}
@-webkit-keyframes yuchi1
{
    from  {-webkit-transform: scale(-0.5,1.3);}
    to    {-webkit-transform: scale(-1.2,1);}
}
@-webkit-keyframes yuchi2
{
    from  {-webkit-transform: scale(0.5,1.3);}
    to    {-webkit-transform: scale(1.2,1);}
}
@-webkit-keyframes yuyou1
{
    0%  {-webkit-transform: rotate(0deg);}
    70% {-webkit-transform: rotate(-51deg);}
    100%{-webkit-transform: rotate(-51deg);}
}
@-webkit-keyframes yuyou11
{
    0%  {-webkit-transform: rotate(90deg);}
    70% {-webkit-transform: rotate(90deg);}
    75% {-webkit-transform: translate(0px,0px) rotate(-189deg);}
    100%{-webkit-transform: translate(0px,190px) rotate(-189deg);}
}
@-webkit-keyframes yuyou2
{
    0%  {-webkit-transform: translate(0px,0px) rotate(-80deg);}
    60% {-webkit-transform: translate(25px,-160px) rotate(-65deg);}
    65% {-webkit-transform: translate(25px,-156px) rotate(-45deg);}
    100%{-webkit-transform: translate(125px,-209px) rotate(-25deg);}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes title_out
{
    from  {-webkit-transform: scale(1);opacity: 1}
    to    {-webkit-transform: scale(1.2);opacity: 0}
}
@-webkit-keyframes div1_in
{
    from  {-webkit-transform: scale(1.05);opacity: 0}
    to    {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes div1_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,-30px);opacity: 0}
}
@-webkit-keyframes div2_in
{
    from  {-webkit-transform: translate(0px,30px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div21_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(40px,0px);opacity: 0}
}
@-webkit-keyframes div22_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-40px,0px);opacity: 0;}
}
@-webkit-keyframes div3_in
{
    from  {-webkit-transform: translate(0px,-50px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div3_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(0px,20px);opacity: 0}
}
@-webkit-keyframes div41_in
{
    from  {-webkit-transform: translate(30px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div42_in
{
    from  {-webkit-transform: translate(-30px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div41_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(30px,0px);opacity: 0}
}
@-webkit-keyframes div42_out
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-30px,0px);opacity: 0}
}
</style>
<div id="container">
    <img src="__DIR__{$dir}/img/bbg.jpg">

    <!-- <img src='http://qnimg.kagirl.cn/pic/moshang/demo1.jpg'> -->

    <div id="titleup" style="top: 72px;">    
        <img id="moxian2" src="__DIR__{$dir}/img/moxian5.png" style="animation: heye3_in 1.8s ease-out 0.7s both;">
        <img id="hua1" src="__DIR__{$dir}/img/jiaobiao.png" style="animation: heye3_in 1s ease-out 2s both;">
    </div>

    <div id="titledown" style="width: 500px; height: 815px; top: -20px;">
        <img id="moxian1" src="__DIR__{$dir}/img/moxian5.png" style="animation: heye3_in 1.1s ease-out 0.7s both;">
        <img id="mofen" src="__DIR__{$dir}/img/mofen.png" style="animation: modian_in 1.5s ease-out 0.3s forwards;">
        <img id="heye1" src="__DIR__{$dir}/img/heyewenzi.png" style="animation: heye1_in 1s linear 0.7s both;">
        <img id="mozi" src="__DIR__{$dir}/img/mo01.png" style="animation: fadein 1.7s ease-in 0.7s both;">
        <img id="shangzi" src="__DIR__{$dir}/img/mo03.png" style="animation: fadein 0.8s ease-in 1.3s both;">
        <img id="huazi" src="__DIR__{$dir}/img/mo02.png" style="animation: fadein 1s ease-in 1.5s both;">
        <img id="kaizi" src="__DIR__{$dir}/img/mo04.png" style="animation: fadein 1s ease-in 2s both;">
    </div>


    <div id="div1v" class="div1v" style="display:none">
        <img id="img1v" style="position:absolute">
    </div>
    <div id="div1h" class="div1h" style="display:none">
        <img id="img1h" style="position:absolute">
    </div>

    <div id="div21h" class="div21h" style="display:none">
        <img id="img21h" style="position:absolute">
    </div>
    <div id="div22h" class="div22h" style="display:none">
        <img id="img22h" style="position:absolute">
    </div>
    <div id="div22v" class="div22v" style="display:none">
        <img id="img22v" style="position:absolute">
    </div>
    <div id="div21v" class="div21v" style="display:none">
        <img id="img21v" style="position:absolute">
    </div>

    <div id="div3v" class="div1v" style="display:none">
        <img id="img3v" style="position:absolute">
    </div>
    <div id="div3h" class="div1h" style="display:none">
        <img id="img3h" style="position:absolute">
    </div>

    <div id="div41h" style="display:none">
        <img id="img41h" style="position:absolute">
    </div>
    <div id="div42h" style="display:none">
        <img id="img42h" style="position:absolute">
    </div>
    <div id="div42v" style="display:none">
        <img id="img42v" style="position:absolute">
    </div>
    <div id="div41v" style="display:none">
        <img id="img41v" style="position:absolute">
    </div>




    <img id="mo1" src="__DIR__{$dir}/img/mo022.png" style="animation: mo1_in 1.5s ease-out both;">

    <img id="mo2" src="__DIR__{$dir}/img/mo011.png" style="animation: fadein 1.5s linear both;">
    <div id="heye2" style="animation: fadein 1s ease-in-out 1s both;">
        <img src="__DIR__{$dir}/img/heye2.png" style="position:absolute;-webkit-animation: heye_ani 2s ease-in-out infinite alternate;-webkit-transform-origin: 95% 95%;">
    </div>
    <div id="lianhua1" style="animation: fadein 1s ease-in-out 1.5s both;">
        <img src="__DIR__{$dir}/img/lianhua2.png" style="position:absolute;-webkit-animation: heye_ani 2.5s 0.5s ease-in-out infinite alternate;-webkit-transform-origin: 62% 95%;">
    </div>
    <div id="lianhua2" style="animation: fadein 1s ease-in-out 2s both;">
        <img src="__DIR__{$dir}/img/lianhua1.png" style="position:absolute;-webkit-animation: heye_ani 2.5s ease-in-out infinite alternate;-webkit-transform-origin: 31% 89%;">
    </div>


    <div style="position:absolute;top:770px;left:-38px;-webkit-transform-origin:828% -1967%;width:13px;height:25px;-webkit-transform: rotate(0deg);-webkit-animation: yuyou1 18s linear infinite">
        <div style="width:33px;height:40px;-webkit-transform: rotate(90deg);position:absolute;-webkit-animation: yuyou11 18s linear infinite">
            <img src="__DIR__{$dir}/img/012.png" style="position:absolute;left:12px;top:0px;">
            <img src="__DIR__{$dir}/img/013.png" style="position:absolute;left:19px;top:8px;-webkit-animation: yuchi2 1s linear infinite alternate;-webkit-transform-origin: 0% 33%;">
            <img src="__DIR__{$dir}/img/013.png" style="position:absolute;left:17px;top:8px;-webkit-transform-origin: 0% 33%;-webkit-transform: scale(-1,1);-webkit-animation: yuchi1 1s linear infinite alternate">
            <img src="__DIR__{$dir}/img/011.png" style="position:absolute;left:14px;top:20px;-webkit-transform-origin: 49% 18%;-webkit-animation: yuwei 0.8s linear infinite alternate">
        </div>
    </div>

    <div style="position:absolute;top:694px;left:300px;width:13px;height:25px;-webkit-transform: rotate(-65deg);">
        <div style="width:33px;height:40px;-webkit-transform: rotate(90deg);position:absolute;">
            <img src="__DIR__{$dir}/img/012.png" style="position:absolute;left:12px;top:0px;">
            <img src="__DIR__{$dir}/img/013.png" style="position:absolute;left:19px;top:8px;-webkit-animation: yuchi2 1s linear infinite alternate;-webkit-transform-origin: 0% 33%;">
            <img src="__DIR__{$dir}/img/013.png" style="position:absolute;left:17px;top:8px;-webkit-transform-origin: 0% 33%;-webkit-transform: scale(-1,1);-webkit-animation: yuchi1 1s linear infinite alternate">
            <img src="__DIR__{$dir}/img/011.png" style="position:absolute;left:14px;top:20px;-webkit-transform-origin: 49% 18%;-webkit-animation: yuwei 0.8s linear infinite alternate">
        </div>
    </div>

    <div style="position:absolute;top:824px;left:377px;width:13px;height:25px;-webkit-transform: rotate(-80deg);-webkit-animation: yuyou2 9s linear infinite">
        <div style="width:33px;height:40px;-webkit-transform: rotate(90deg);position:absolute;">
            <img src="__DIR__{$dir}/img/012.png" style="position:absolute;left:12px;top:0px;">
            <img src="__DIR__{$dir}/img/013.png" style="position:absolute;left:19px;top:8px;-webkit-animation: yuchi2 1s linear infinite alternate;-webkit-transform-origin: 0% 33%;">
            <img src="__DIR__{$dir}/img/013.png" style="position:absolute;left:17px;top:8px;-webkit-transform-origin: 0% 33%;-webkit-transform: scale(-1,1);-webkit-animation: yuchi1 1s linear infinite alternate">
            <img src="__DIR__{$dir}/img/011.png" style="position:absolute;left:14px;top:20px;-webkit-transform-origin: 49% 18%;-webkit-animation: yuwei 0.8s linear infinite alternate">
        </div>
    </div>

    <img id="heye3" src="__DIR__{$dir}/img/heye.png" style="animation: heye3_in 1.5s ease-out 0.3s both;">

    <div id="pagetitle" style="position: absolute; width: 400px; height: 250px; top: 213px; left: 62px; font-size: 40px; color: rgb(0, 0, 0); overflow: hidden; transform-origin: 50% 0% 0px; animation: title_in 1s ease-in-out 1.5s both;">
        <div style="position:absolute;width:400px;height:250px;top:0px;left:0px;overflow:hidden;">
            <div style="position:absolute;width:400px;height:250px;display:table;overflow:hidden;">
                <div id="titlecontent" style="width:400px;height:250px;vertical-align:middle;display:table-cell;text-align:center;font-size:40px;line-height:50px;">文</div>
            </div>
        </div>
    </div>

    <img src="__DIR__{$dir}/img/wtd.png" style="left:300px;top:650px;-webkit-animation: shuiwen 5s linear infinite;-webkit-transform-origin: 50% 0%;">
    <img src="__DIR__{$dir}/img/guangdian.png" style="left:270px;top:635px;-webkit-animation: shuiwen2 3s linear infinite">
    <img src="__DIR__{$dir}/img/guangdian01.png" style="position:absolute;left:90px;top:707px;opacity:0.5;">
    <div style="left:340px;top:707px;width:127px;height:129px;-webkit-animation: guangdian1 3s linear infinite;overflow:hidden">
        <img src="__DIR__{$dir}/img/guangdian01.png" style="position:absolute;left:-250px;-webkit-animation: guangdian2 3s linear infinite">
    </div>



</div>



<script>
var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var timeout0;
var timeout1;
var timeout2;
var timeout3;
var timeout4;
var timeout5;
var timeout6;

var delaytime=6000;
function id(name)
{
    return document.getElementById(name);
}
function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    showtitle();
    canshow = true;
    for(var i=0;i<slider_images_url.length;i++)
    {
        var img=new Image();
        img.index=i;
        img.src=slider_images_url[i];
        img.onload=image_onload;
        img.onerror= image_onerror;
        Onload_imgs_url[i] = 'loading';
    }       
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<10)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    console.log(Onload_imgs_url[index]);
    console.log(have_num + '-' + error_num);
    if((have_num+error_num >= 10 || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            distitle();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<10)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    console.log(have_num + '-' + error_num);

    if((have_num + error_num >= 10 ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            distitle();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
        }

    }
}
function id(name)
{
    return document.getElementById(name);
}
function showtitle()
{
    id('mo1').style.webkitAnimation = 'mo1_in 1.5s ease-out both';
    id('mo2').style.webkitAnimation = 'fadein 1.5s linear both';
    id('mofen').style.webkitAnimation = 'modian_in 1.5s 0.3s ease-out forwards';
    id('heye3').style.webkitAnimation = 'heye3_in 1.5s 0.3s ease-out both';
    id('moxian2').style.webkitAnimation = 'heye3_in 1.8s 0.7s ease-out both';
    id('moxian1').style.webkitAnimation = 'heye3_in 1.1s 0.7s ease-out both';
    id('mozi').style.webkitAnimation = 'fadein 1.7s 0.7s ease-in both';
    id('heye1').style.webkitAnimation = 'heye1_in 1s 0.7s linear both';
    id('shangzi').style.webkitAnimation = 'fadein 0.8s 1.3s ease-in both';
    id('huazi').style.webkitAnimation = 'fadein 1s 1.5s ease-in both';
    id('kaizi').style.webkitAnimation = 'fadein 1s 2s ease-in both';
    id('hua1').style.webkitAnimation = 'heye3_in 1s 2s ease-out both';
    id('heye2').style.webkitAnimation = 'fadein 1s 1s ease-in-out both';
    id('lianhua1').style.webkitAnimation = 'fadein 1s 1.5s ease-in-out both';
    id('lianhua2').style.webkitAnimation = 'fadein 1s 2s ease-in-out both';

    id('pagetitle').style.webkitTransformOrigin = '50% 0%';
    id('pagetitle').style.webkitAnimation = 'title_in 1s 1.5s ease-in-out both';

    id('titlecontent').innerHTML = e_desc;
    if(e_desc.length>14&&e_desc.length<22)
    {
        id('titleup').style.top = '42px';
        id('titledown').style.top = '0px';
    }
    else if(e_desc.length<15)
    {
        id('titleup').style.top = '72px';
        id('titledown').style.top = '-20px';
    }
    else
    {
        id('titleup').style.top = '0px';
        id('titledown').style.top = '0px';
    }
}

function distitle () 
{
    id('pagetitle').style.webkitTransformOrigin = '50% 50%';
    id('titleup').style.webkitAnimation = 'fadeout 2s linear both';
    id('pagetitle').style.webkitAnimation = 'title_out 2s linear both';
    id('titledown').style.webkitAnimation = 'title_out 2s linear both';

    timeout1 = setTimeout(show1,1000)
}

function show1 () 
{
    setImage('1');
    id('div1v').style.webkitAnimation = 'div1_in 1.2s cubic-bezier(.34,.03,.48,.99) both';
    id('div1h').style.webkitAnimation = 'div1_in 1.2s cubic-bezier(.34,.03,.48,.99) both';

    timeout2 = setTimeout(show2,4000)
}
function show2 () 
{
    setImage('21');
    setImage('22');
    id('div1v').style.webkitAnimation = 'div1_out 1.2s cubic-bezier(.34,.03,.48,.99) both';
    id('div1h').style.webkitAnimation = 'div1_out 1.2s cubic-bezier(.34,.03,.48,.99) both';

    id('div21h').style.webkitAnimation = 'div2_in 1.5s 0.4s cubic-bezier(.34,.03,.48,.99) both';
    id('div22h').style.webkitAnimation = 'div2_in 1.5s 0.4s cubic-bezier(.34,.03,.48,.99) both';
    id('div21v').style.webkitAnimation = 'div2_in 1.5s 0.4s cubic-bezier(.34,.03,.48,.99) both';
    id('div22v').style.webkitAnimation = 'div2_in 1.5s 0.4s cubic-bezier(.34,.03,.48,.99) both';

    timeout3 = setTimeout(show3,4000)
}
function show3 () 
{
    setImage('3');
    id('div21h').style.webkitAnimation = 'div21_out 1s cubic-bezier(.36,.03,.74,.99) both';
    id('div22h').style.webkitAnimation = 'div22_out 1s cubic-bezier(.36,.03,.74,.99) both';
    id('div21v').style.webkitAnimation = 'div21_out 1s cubic-bezier(.36,.03,.74,.99) both';
    id('div22v').style.webkitAnimation = 'div22_out 1s cubic-bezier(.36,.03,.74,.99) both';

    id('div3v').style.webkitAnimation = 'div3_in 1.5s 0.4s cubic-bezier(.34,.03,.48,.99) both';
    id('div3h').style.webkitAnimation = 'div3_in 1.5s 0.4s cubic-bezier(.34,.03,.48,.99) both';

    timeout4 = setTimeout(show4,4000)
}
function show4 () 
{
    setImage('41');
    setImage('42');
    id('div3v').style.webkitAnimation = 'div3_out 1s cubic-bezier(.36,.03,.74,.99) both';
    id('div3h').style.webkitAnimation = 'div3_out 1s cubic-bezier(.36,.03,.74,.99) both';

    id('div41h').style.webkitAnimation = 'div41_in 1.5s 0.4s cubic-bezier(.34,.03,.48,.99) both';
    id('div42h').style.webkitAnimation = 'div42_in 1.5s 0.4s cubic-bezier(.34,.03,.48,.99) both';
    id('div41v').style.webkitAnimation = 'div41_in 1.5s 0.4s cubic-bezier(.34,.03,.48,.99) both';
    id('div42v').style.webkitAnimation = 'div42_in 1.5s 0.4s cubic-bezier(.34,.03,.48,.99) both';
    timeout5 = setTimeout(show1_1,4000)
}
function show1_1 () 
{
    setImage('1');
    id('div41h').style.webkitAnimation = 'div41_out 1s cubic-bezier(.36,.03,.74,.99) both';
    id('div42h').style.webkitAnimation = 'div42_out 1s cubic-bezier(.36,.03,.74,.99) both';
    id('div41v').style.webkitAnimation = 'div41_out 1s cubic-bezier(.36,.03,.74,.99) both';
    id('div42v').style.webkitAnimation = 'div42_out 1s cubic-bezier(.36,.03,.74,.99) both';

    id('div1v').style.webkitAnimation = 'div1_in 1.5s 0.5s cubic-bezier(.34,.03,.48,.99) both';
    id('div1h').style.webkitAnimation = 'div1_in 1.5s 0.5s cubic-bezier(.34,.03,.48,.99) both';

    timeout6 = setTimeout(show2,4000);
}
var divwidth = {'1h':437,'1v':437,'21h':437,'22h':437,'21v':250,'22v':250,'3h':437,'3v':437,'41h':410,'42h':410,'41v':250,'42v':250};
var divheight = {'1h':309,'1v':639,'21h':290,'22h':290,'21v':350,'22v':350,'3h':309,'3v':639,'41h':290,'42h':290,'41v':350,'42v':350};

function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        console.log(Onload_imgs_url[image_url_index]);
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
    var div;
    var div1;
    var divname;

    if(img_bili > 1)
    {
        divname = idname + 'h';
        div = id('div'+idname+'h');
        div1 = id('div'+idname+'v');
    }
    else
    {
        divname = idname + 'v';
        div = id('div'+idname+'v');
        div1 = id('div'+idname+'h');
    }

    div.style.display = 'block';
    div1.style.display = 'none';


    var height = divheight[divname];
    var width = divwidth[divname];

    var img = id('img'+divname);
    img.src = Onload_imgs_url[image_url_index];
    console.log(img.src);

    if(img_bili > (width/height))
    {
        img.style.top = '0px';
        img.style.height = height + 'px';
        img.style.width = height*img_bili + 'px';
        img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        img.style.left = '0px';
        img.style.width = width+'px';
        img.style.height = width/img_bili + 'px';
        img.style.top = -((width/img_bili-height)/2) + 'px';
    }

    image_url_index++;
    if(image_url_index==Onload_imgs_url.length)
        image_url_index = 0;
    // console.log(width,height,img.style.left,img.style.top,img.width,img.height);
}
call_me(load_images);
function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}
function clearnode () 
{
    id('div1h').style.webkitAnimation = '';
    id('div1v').style.webkitAnimation = '';
    id('div21h').style.webkitAnimation = '';
    id('div22h').style.webkitAnimation = '';
    id('div21v').style.webkitAnimation = '';
    id('div22v').style.webkitAnimation = '';
    id('div3h').style.webkitAnimation = '';
    id('div3v').style.webkitAnimation = '';
    id('div41h').style.webkitAnimation = '';
    id('div42h').style.webkitAnimation = '';
    id('div41v').style.webkitAnimation = '';
    id('div42v').style.webkitAnimation = '';
    id('div1h').style.display = 'none';
    id('div1v').style.display = 'none';
    id('div21h').style.display = 'none';
    id('div22h').style.display = 'none';
    id('div21v').style.display = 'none';
    id('div22v').style.display = 'none';
    id('div3h').style.display = 'none';
    id('div3v').style.display = 'none';
    id('div41h').style.display = 'none';
    id('div42h').style.display = 'none';
    id('div41v').style.display = 'none';
    id('div42v').style.display = 'none';

    id('mo1').style.webkitAnimation = '';
    id('mo2').style.webkitAnimation = '';
    id('mofen').style.webkitAnimation = '';
    id('heye3').style.webkitAnimation = '';
    id('moxian2').style.webkitAnimation = '';
    id('moxian1').style.webkitAnimation = '';
    id('mozi').style.webkitAnimation = '';
    id('heye1').style.webkitAnimation = '';
    id('shangzi').style.webkitAnimation = '';
    id('huazi').style.webkitAnimation = '';
    id('kaizi').style.webkitAnimation = '';
    id('hua1').style.webkitAnimation = '';
    id('heye2').style.webkitAnimation = '';
    id('lianhua1').style.webkitAnimation = '';
    id('lianhua2').style.webkitAnimation = '';
    id('pagetitle').style.webkitAnimation = '';
    id('titledown').style.webkitAnimation = '';
    id('titleup').style.webkitAnimation = '';

    id('titlecontent').innerHTML = '';

    clearTimeout(timeout0);
    clearTimeout(timeout1);
    clearTimeout(timeout2);
    clearTimeout(timeout3);
    clearTimeout(timeout4);
    clearTimeout(timeout5);
    clearTimeout(timeout6);

}
</script>



	<link type="text/css" rel="stylesheet" href="__DIR__{$dir}/css/guanzhu.css">
	<link rel="stylesheet" type="text/css" href="__DIR__{$dir}/css/buttons.css">

	<style type="text/css">
		@-webkit-keyframes zhuan
		{
			0%
			{
				-webkit-transform:rotate(0deg);
			}

			100%
			{
				-webkit-transform:rotate(360deg);
			}
		}


		@-webkit-keyframes aa_out_bounce_left
		{
		    0%{
		        -webkit-transform:translateX(0)
		    }
		    20%{
		        -webkit-transform:translateX(20px)
		    }
		    100%{
		        -webkit-transform:translateX(-125px)
		    }
		}
		@-webkit-keyframes aa_in_bounce_center
		{
		    0%{
		        opacity:0;
		        -webkit-transform:scale(.3)
		    }
		    50%{
		        opacity:1;
		        -webkit-transform:scale(1.05)
		    }
		    70%{
		        -webkit-transform:scale(.9)
		    }
		    100%{
		        -webkit-transform:scale(1)
		    }
		}
		@-webkit-keyframes jinbi
		{
			from {-webkit-transform: rotateY(0deg);}
			to   {-webkit-transform: rotateY(180deg);}
		}
		.jubao-item
		{
			position: relative;
			float: left;
			width: 360px;
			height: 55px;
			top: 0px;
			font-size: 20px;
			line-height: 55px;
			margin-left: 20px;
			border-bottom: 1px solid #EBEBEB;
		}
		.jubao-radio
		{
			position: absolute;
			right: 10px;
			width: 25px;
			height: 25px;
			top: 20px;
		}

		.jubao-detail
		{
			position: relative;
			float: left;
			width: 360px;
			margin-left: 20px;
		}
		.jubao-detail textarea
		{
			width: 360px;
		    height: 80px;
		    font-size: 20px;
		    resize: none;
		    line-height: 40px;
		    border: none;
		    background-color: #eee;
		    border-radius: 10px;
		    padding-left: 10px;
		}
		@-webkit-keyframes guangzhu_ani
		{
			from  {-webkit-transform: scale(1);}
			to    {-webkit-transform: scale(1.05);}
		}
		@-webkit-keyframes che_ani
		{
		    0%    {-webkit-transform: translate(-20px,0px);opacity: 1}
		    8%  {-webkit-transform: translate(100px,0px) scale(0.95,1.05);opacity: 1}
		    10%  {-webkit-transform: translate(100px,0px) scale(1,1);opacity: 1}
		    12%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    14%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    16%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    18%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    20%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    45%   {-webkit-transform: translate(100px,0px) scale(0.97,1.03); opacity: 1}
		    50%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    60%   {-webkit-transform: translate(200px,0px); opacity: 0}
		    100%  {-webkit-transform: translate(200px,0px); opacity: 0}
		}
		@-webkit-keyframes che1_ani
		{
		    0%    {opacity: 1}
		    12%   {opacity: 1}
		    14%   {opacity: 0.5}
		    16%   {opacity: 1}
		    18%   {opacity: 0.5}
		    20%   {opacity: 1}
		    100%  {opacity: 1}

		}
		@-webkit-keyframes baoming
		{
		    0%  {opacity: 0}
		    58% {opacity: 0;-webkit-transform: scale(1.4);}
		    59% {opacity: 1;-webkit-transform: scale(1.4);}
		    70% {opacity: 1;-webkit-transform: scale(0.95);}
		    72% {opacity: 1;-webkit-transform: scale(1);}
		    80% {opacity: 0.8;-webkit-transform: scale(1.1);}
		    88% {opacity: 1;-webkit-transform: scale(1);}
		    93% {opacity: 0;-webkit-transform: scale(1.3);}
		    100%{opacity: 0}
		}
		@-webkit-keyframes shijia
		{
		    0%  {-webkit-transform: rotate(20deg) scale(0.8);opacity: 0}
		    10% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    20% {-webkit-transform: rotate(20deg) scale(0.85);}
		    28% {-webkit-transform: rotate(20deg) scale(0.75);}
		    38% {-webkit-transform: rotate(20deg) scale(0.85);}
		    47% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    55% {-webkit-transform: rotate(20deg) scale(0.90);opacity: 0}
		    100%{opacity: 0}

		}
		@-webkit-keyframes biaozhi_ani
		{
		    0%  {opacity: 0}
		    10% {opacity: 0}
		    20% {opacity: 1}
		    45% {opacity: 1}
		    55% {opacity: 0}
		    100%{opacity: 0}
		}
		#musicinfo
		{
			color: #fff;
			text-shadow: 1px 1px 2px #000;
			font-size: 15px;
			position: fixed;
			left: 432px;
		    top: 82px;
		    width: 60px;
		    height: 20px;
		    z-index: 100;
		    display: none;
		    opacity: 1;
		}
		@-webkit-keyframes heart_beating
		{
			from {opacity: 1;-webkit-transform: scale(1);}
			to   {opacity: 0.8;-webkit-transform: scale(0.8);}
		}
		@-webkit-keyframes heart1_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(-20px,-50px) scale(1.5);}
		}
		@-webkit-keyframes heart2_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(20px,-60px) scale(2);}
		}
		@-webkit-keyframes heart3_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(70px,-40px) scale(2);}
		}
#enddiv
{
    position: absolute;
    width: 500px;
    height: 815px;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    display: none;
    opacity: 0;
}
#title_div
{
    width: 320px;
    height: 200px;
    left: 90px;
    top: 250px;
    color: #fff;
    font-size: 25px;
    position: relative;
    line-height: 45px;
    text-align: center;
    font-family: '微软雅黑';
    display:table;
}
#title_line
{
    position: absolute;
    width: 370px;
    height: 2px;
    background-color: #fff;
    top: 415px;
    left: 65px;
}
#reshowbtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(94,159,177,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 74px;
}
#guanzhubtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(185,91,83,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 268px;
}
@-webkit-keyframes fadein
{
	from  {opacity: 0}
	to    {opacity: 1}
}
	</style>

